<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称">
                        <Select v-model="value2" style="width: 250px" :clearable="true">
                            <Option v-for="item in options2" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="组团">
                        <Select v-model="value3" style="width: 250px" :clearable="true">
                            <Option v-for="item in options3" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="楼栋">
                        <Select v-model="value4" style="width: 250px" :clearable="true">
                            <Option v-for="item in options4" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="单元">
                        <Select v-model="value5" style="width: 250px" :clearable="true">
                            <Option v-for="item in options5" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="房间号">
                        <Select v-model="value6" style="width: 250px" :clearable="true">
                            <Option v-for="item in options6" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="保养状态">
                        <Select v-model="value8" style="width: 250px" :clearable="true">
                            <Option v-for="item in options8" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <!-- <FormItem label="维修状态">
                        <Select v-model="value9" style="width: 250px">
                            <Option v-for="item in options9" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="检测状态">
                        <Select v-model="value10" style="width: 250px">
                            <Option v-for="item in options10" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem> -->
                    <FormItem label="设备名称">
                        <Input v-model="filters.equi" placeholder="设备名称" style="width: 250px"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" @click="handleAdd()" style="margin-right: 10px;">新增</Button>
            </Row>
            <Table stripe border :loading="tableLoading" :columns="tableColumn" :data="tableData" ref="table">
            </Table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
        <Modal v-model="formVisible" title="派工" class="modal-content" width="900" :mask-closable="false" fullscreen>
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <Row :gutter="20" style="background:#f8f8f9;padding:20px">
                    <Card title="基本属性">
                        <Row>
                            <Col span="8">
                                <FormItem label="小区名称">
                                    <Select v-model="modal.value2" style="width: 250px" :clearable="true" >
                                        <Option v-for="item in options2" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="单元">
                                    <Select v-model="modal.value5" style="width: 250px" :clearable="true" >
                                        <Option v-for="item in options5" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="出产地">
                                    <Input v-model="modal.address" placeholder="出产地"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="组团">
                                    <Select v-model="modal.value3" style="width: 250px" :clearable="true">
                                        <Option v-for="item in options3" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="房间号">
                                    <Select v-model="modal.value6" style="width: 250px" :clearable="true">
                                        <Option v-for="item in options6" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="购买人">
                                    <Input v-model="modal.person" placeholder="购买人"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="楼栋">
                                    <Select v-model="modal.value4" style="width: 250px" :clearable="true">
                                        <Option v-for="item in options4" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="设备名称">
                                    <Input v-model="modal.sbname" placeholder="设备名称"
                                           style="width: 250px"></Input>
                                </FormItem>
                                <FormItem label="价格">
                                    <Input v-model="modal.money" placeholder="价格"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>
                </Row>
                <Row :gutter="20" style="background:#f8f8f9;padding:20px">
                    <Card title="技术参数">
                        <Row>
                            <Col span="8">
                                <FormItem label="型号/规格">
                                    <Input v-model="modal.xh" placeholder="型号/规格"
                                           style="width: 250px"></Input>
                                </FormItem>
                                <FormItem label="重量">
                                    <Input v-model="modal.hg" placeholder="重量"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="长/宽/高">
                                    <Input v-model="modal.lg" placeholder="长/宽/高"
                                           style="width: 250px"></Input>
                                </FormItem>
                                <FormItem label="控制方式">
                                    <Input v-model="modal.con" placeholder="控制方式"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="控制系统">
                                    <Input v-model="modal.sys" placeholder="控制系统"
                                           style="width: 250px"></Input>
                                </FormItem>
                                <FormItem label="驱动系统">
                                    <Input v-model="modal.pu" placeholder="驱动系统"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>
                </Row>
                <Row :gutter="20" style="background:#f8f8f9;padding:20px">
                    <Card title="检测参数">
                        <Row>
                            <Col span="8">
                                <FormItem label="型号/规格">
                                    <Input v-model="modal.xh1" placeholder="型号/规格"
                                           style="width: 250px"></Input>
                                </FormItem>
                                <FormItem label="重量">
                                    <Input v-model="modal.hg1" placeholder="重量"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="长/宽/高">
                                    <Input v-model="modal.lg1" placeholder="长/宽/高"
                                           style="width: 250px"></Input>
                                </FormItem>
                                <FormItem label="控制方式">
                                    <Input v-model="modal.con1" placeholder="控制方式"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="控制系统">
                                    <Input v-model="modal.sys1" placeholder="控制系统"
                                           style="width: 250px"></Input>
                                </FormItem>
                                <FormItem label="驱动系统">
                                    <Input v-model="modal.pu1" placeholder="驱动系统"
                                           style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>
                </Row>
                <Row :gutter="20" style="background:#f8f8f9;padding:20px">
                    <Card title="配件附件">
                        <Row>
                            <Col span="8">
                                <FormItem label="配件">
                                    <Input v-model="modal.xh2" placeholder="配件" style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="附件">
                                    <Input v-model="modal.lg2" placeholder="附件" style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="其他">
                                    <Input v-model="modal.sys2" placeholder="其他" style="width: 250px"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Card>
                </Row>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>

        </Modal>
        <Modal v-model="formmodal1" title="保养设置" class="modal-content" :mask-closable="false">
            <Form :model="modal1" :rules="rule" ref="form3" label-position="right" :label-width="100" class="myOpenFrom">
                <FormItem label="设备名称">
                    <p>德高电梯000</p>
                </FormItem>
                <FormItem label="保养时限">
                    <DatePicker @on-change="" format="yyyy-MM-dd" type="daterange" confirm placement="bottom-end" placeholder="请选择起始日期" style="width: 250px" v-model="date"></DatePicker>
                </FormItem>
                <FormItem label="保养公司">
                    <Input v-model="modal1.company" placeholder="保养公司" style="width: 250px"></Input>
                </FormItem>
                <FormItem label="保养价格">
                    <Input v-model="modal1.money" placeholder="保养价格" style="width: 250px"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="modal1Submit" :loading="modal1Loading">确定</Button>
            </div>
        </Modal>

        <Modal v-model="formmodal2" title="维修设置" class="modal-content" :mask-closable="false">
            <Form :model="modal2" :rules="rule" ref="form4" label-position="right" :label-width="100" class="myOpenFrom">
                <FormItem label="设备名称">
                    <p>德高电梯000</p>
                </FormItem>
                <FormItem label="故障原因">
                    <Input v-model="modal2.company" placeholder="故障原因" style="width: 250px"></Input>
                </FormItem>
                <FormItem label="维修人">
                    <Input v-model="modal2.money" placeholder="维修人" style="width: 250px"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="modal2Submit" :loading="modal2Loading">确定</Button>
            </div>
        </Modal>

        <Modal v-model="formmodal3" title="检测设置" class="modal-content" :mask-closable="false">
            <Form :model="modal3" :rules="rule" ref="form4" label-position="right" :label-width="100" class="myOpenFrom">
                <FormItem label="设备名称">
                    <p>德高电梯000</p>
                </FormItem>
                <FormItem label="检测日期">
                    <DatePicker type="date" placeholder="请选择日期" style="width: 250px"></DatePicker>
                </FormItem>
                <FormItem label="检测人">
                    <Input v-model="modal3.money" placeholder="维修人" style="width: 250px"></Input>
                </FormItem>
                <FormItem label="检测结果">
                    <Input v-model="modal3.result" placeholder="维修结果" style="width: 250px"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="modal3Submit" :loading="modal3Loading">确定</Button>
            </div>
        </Modal>
    </div>
</template>


<script>
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'
    const token = Cookies.get(TOKEN_KEY)
    import expandRow from './table-expand.vue';
    //校验规则
    const rules = {
        groupName:[{
            message: "请选择组团",
            trigger: "change"
        }],
        housingId:[{
            required: true,
            message: "请选择小区",
            trigger: "change"
        }],
        building:[{
            message: "请选择楼栋",
            trigger: "change"
        }],
        unit:[{
            message: "请选择单元",
            trigger: "change"
        }],
        room:[{
            required: true,
            message: "请选择房间号",
            trigger: "change"
        }],
        name:[{
            message: "请选择工人"
        }],
        status:[{
            required: true,
            message: "请选择房屋状态",
            trigger: "blur"
        }],
    };
    //打开页面
    let handleAdd = function (id) {
        this.modal1 = {};
        this.formmodal1=true
        this.modal1Loading = false;
    };
    let onCancel = function () {
        this.$refs["form2"].resetFields();
        this.formLoading = false;
        this.modal1Loading=false;
        this.formVisible = false;
        this.formmodal1 = false;

        this.modal2Loading = false;
        this.formmodal2 = false;

        this.modal3Loading = false;
        this.formmodal3 = false;
    };
    //新增、修改保存
    let handleSubmit = function () {
                this.formLoading = false;
                this.formVisible = false;
    };
    //保养新增
    let modal1Submit= function () {
                this.modal1Loading = false;
                this.formmodal1 = false;
    };
    //维修新增
    let modal2Submit= function () {
                this.modal2Loading = false;
                this.formmodal2 = false;
    };
    //检测新增
    let modal3Submit= function () {
                this.modal3Loading = false;
                this.formmodal3 = false;
    };
    export default {
        name: "disList",
        components: {
            expandRow
        },
        data() {
            return {
                //新增和修改
                modal_name:'',
                modal_room:'',
                modal_unit:'',//单元
                modal_groupName:'',//组团
                modal_building:'',//楼栋
                //保养
                modal1:{},
                formmodal1:false,
                //维修
                modal2:{},
                formmodal2:false,
                modal2Loading:false,
                //检测
                modal3:{},
                formmodal3:false,
                modal3Loading:false,

                formVisible: false,
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //验证规则
                rule: rules,
                filters:{},
                date:'',
                modal:{},
                
                options2: [{
                  value: '1',
                  label: '朝舞小区'
                }, {
                  value: '2',
                  label: '康泰小区'
                }],
                value2: '',
                options3: [{
                  value: '1',
                  label: 'A组'
                }, {
                  value: '2',
                  label: 'B组'
                }],
                value3: '',
                options4: [{
                  value: '1',
                  label: '1栋'
                }, {
                  value: '2',
                  label: '2栋'
                }],
                options5: [{
                  value: '1',
                  label: '1单元'
                }, {
                  value: '2',
                  label: '2单元'
                }],
                value5: '',
                options6: [{
                  value: '1',
                  label: '1-1'
                }, {
                  value: '2',
                  label: '1-2'
                }],
                value6: '',
                options7: [{
                  value: '1',
                  label: '王小兵'
                }, {
                  value: '2',
                  label: '张一山'
                }],
                value7: '',
                options8: [{
                  value: '1',
                  label: '未保养'
                }, {
                  value: '2',
                  label: '保养中'
                }],
                value8: '',
                options9: [{
                  value: '1',
                  label: '正常运行'
                }, {
                  value: '2',
                  label: '维修中'
                }],
                value9: '',
                options10: [{
                  value: '1',
                  label: '未检测'
                }, {
                  value: '2',
                  label: '检测中'
                }],
                value10: '',
                //表格数据
                tableData: [
                    {
                        datetime:"2018-08-06",
                        houseName:"朝舞小区",
                        groupName:"A组",
                        building:"1栋",
                        unit:"1单元",
                        room:"",
                        person:"张山",
                        sbname:"德高电梯000",
                        address:"山东某某厂",
                        money:"12000",
                        xh:"PT13",
                        lg:"2m*2m*2m",
                        sys:"电脑智能控制",
                        hg:"100kg",
                        con:"集选",
                        pu:"交流调频调压驱动",
                        xh2:"无",
                        maintenance:"保养中",
                        repair:"正常",
                        check:"未检测",
                        use:"1",
                    },
                    {
                        datetime:"2018-08-01",
                        houseName:"朝舞小区",
                        groupName:"A组",
                        building:"1栋",
                        unit:"1单元",
                        room:"",
                        person:"张山",
                        sbname:"德高电梯000",
                        address:"山东某某厂",
                        money:"12000",
                        xh:"PT13",
                        lg:"2m*2m*2m",
                        sys:"电脑智能控制",
                        hg:"100kg",
                        con:"集选",
                        pu:"交流调频调压驱动",
                        xh2:"无",
                        maintenance:"保养中",
                        repair:"正常",
                        check:"未检测",
                        use:"1",
                    },
                    {
                        datetime:"2018-08-04",
                        houseName:"朝舞小区",
                        groupName:"B组",
                        building:"1栋",
                        unit:"2单元",
                        room:"",
                        person:"张山",
                        sbname:"德高电梯000",
                        address:"山东某某厂",
                        money:"12000",
                        xh:"PT13",
                        lg:"2m*2m*2m",
                        sys:"电脑智能控制",
                        hg:"100kg",
                        con:"集选",
                        pu:"交流调频调压驱动",
                        xh2:"无",
                        maintenance:"保养中",
                        repair:"正常",
                        check:"未检测",
                        use:"1",
                    }
                ],
                //表格字段
                tableColumn: [
                    {
                        title: "小区名称",
                        key: "houseName"
                    },
                    {
                        title: "组团",
                        key: "groupName"
                    },
                    {
                        title: "楼栋",
                        key: "building"
                    },
                    {
                        title: "单元",
                        key: "unit"
                    },
                    {
                        title: "房间号",
                        key: "room"
                    },
                    {
                        title: "设备名称",
                        key: "sbname"
                    },
                    {
                        title: "保养状态",
                        key: "maintenance"
                    },
                    {
                        title: "保养日期",
                        key: "datetime"
                    },
                    {
                        title: "保养花费",
                        key: "money"
                    },
                    // {
                    //   title: "打印机名称",
                    //   sortable: true,
                    //   key: "printName",
                    //   render: (h, params) => {
                    //     let label = "无";
                    //     if (params.row.printName != null) {
                    //       label = params.row.printName;
                    //     }
                    //     return h("span", label);
                    //   }
                    // },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '继续保养')
                            ]);
                        }
                    }
                ],
                //数据表格隐藏那个状态
                tableLoading: false,
                formLoading:false,
                modal1Loading:false,
                value4:'',
            }
        },
        created: function () {
        },
        methods: {
            handleAdd,
            onCancel,
            handleSubmit,
            modal1Submit,
            modal2Submit,
            modal3Submit,
            handlePage(value) {
                this.pageNum = value;
            },
            handlePageSize(value) {
                this.pageSize = value;
            },
            show (index) {
                this.handleAdd();
            },
            maintenance(index){
                this.formmodal1=true;
            },
            repair(index){
                this.formmodal2=true;
            },
            check(index){
                this.formmodal3=true;
            },
            remove (index) {
                this.$Modal.success({
                    title: '继续保养成功'
                });
            }
        }
    };
</script>

<style lang="less">
</style>
